<!DOCTYPE HTML>
<html id="html">
    <head>
        <meta charset="utf-8">
        <title>测试用例</title>
        <script src="avalon.js"></script>
        <style>
            .with_parent{
                padding:5px;
                border:1px solid red;
                height:80px;
            }
        </style>
    </head>
    <body>
        <div ms-controller="test">
            <h1>动态更新对象属性</h1>
            <p>请耐心等待定时器的变化</p>
            <div ms-with="obj" class='with_parent'>
                <div class='xxx'>{{$val.num}}</div>
            </div>
            <div class='repeat_parent'  >
                <div ms-repeat="obj" title='这是repeat'>{{$val.num}}</div>
            </div>
        </div>

        <script>

            window.xxx = false
            var model = avalon.define("test", function(vm) {
                vm.obj = {
                    a1: {num: 1111}
                }
            });
            setTimeout(function() {

                window.xxx = true
                model.obj = {
                    a1: {num: 2222}, a2: {num: 3333}
                }
                setTimeout(function() {
                    model.obj.a1.num = 4444
                    model.obj.a2.num = 5555

                    setTimeout(function() {
                        model.obj = {
                            a1: {num: "MMMMM"},
                            a2: {num: "NNNNN"}
                        }
                    }, 2000)

                }, 2000)

            }, 2000)
        </script>
    </body>
</html>